<template>
    <div class="row item">
        <div class="col-xs-11">
                <div class="row">
                <span style="font-size: 18px">2018019</span>
                <span style="margin-left: 10px">2018-2-13</span>
                </div>
            <div class="row" style="margin-top: 10px;">
<!--                //1,2,3,4,5-->
                <div class="ball-item ball-red" v-for="(red, i) in history.red.split(',')" :key="i">{{red}}</div>
                <div class="ball-item ball-blue">{{history.blue}}</div>
            </div>
        </div>
        <div class="col-xs-1 div-right">
            <span class="glyphicon glyphicon-chevron-right"/>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component,Vue ,Prop} from "vue-property-decorator"
    import ItemInfo from "@/types/ItemInfo";
    @Component
    export default class HistoryItem extends Vue{
        //接口类型
        @Prop({type: Object } )
        history!: ItemInfo ;
    }
</script>

<style scoped>
    .item{
        border: 1px solid gainsboro;
        height: 80px;
        padding-top: 5px;
        padding-left:15px;
    }

    .div-right{
        padding-left: 0px;
        padding-top: 30px;
    }
</style>